<template>
	<view>
        <u-popup :show="show" mode="bottom"  @close="closeShow" :round="10">
			<div>
				<div class="popupTitle">确认发货</div>
				<div class="popup-con" style="padding-bottom:100px">
					<div class="send-list">
						<div class="send-item">
							<div class="send-top">
								<div class="name">{{info.inquiryTitle}}</div>
								<div class="num">{{info.goodsNum}}吨</div>
							</div>
							<div class="send-middle">
								{{info.address}}<span style="padding-left:10px">{{info.orderPayType}}{{info.orderShippingType}}</span><span style="padding-left:10px">交期：{{info.receiveDate}}</span>
							</div>
							<div class="send-bottom">
								发货数量 <span style="padding:0 8px">{{info.goodsNum}}</span>吨
							</div>
						</div>
					</div>
					
					<div class="popup-label">
						<div>{{info.orderShippingType&&info.orderShippingType.indexOf('自提') !=-1 ? '提货信息' : '物流信息'}}</div>
					</div>
					<u--form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="100" errorType="toast">
						<div v-if="info.orderShippingType && info.orderShippingType.indexOf('自提') != -1 ">
							<u-form-item required label="仓库地址" prop="warehouseAddress" borderBottom>
								<u--input v-model="form.warehouseAddress" border="none"></u--input>
							</u-form-item>
							<u-form-item  required label="联系人"  borderBottom prop="warehouseContacts">
								<u--input v-model="form.warehouseContacts" border="none"></u--input>
							</u-form-item>
							<u-form-item  required label="仓库联系电话"  borderBottom prop="warehousePhone">
								<u--input v-model="form.warehousePhone" border="none"></u--input>
							</u-form-item>
						</div>
						
						<div v-else>
							<u-form-item required label="车牌号" prop="driverCardNo" borderBottom>
								<u--input v-model="form.driverCardNo" border="none"></u--input>
							</u-form-item>
							<u-form-item  required label="司机姓名"  borderBottom prop="driverName">
								<u--input v-model="form.driverName" border="none"></u--input>
							</u-form-item>
							<u-form-item  required label="联系手机"  borderBottom prop="driverPhone">
								<u--input v-model="form.driverPhone" border="none"></u--input>
							</u-form-item>
						</div>
					</u--form>
				</div>
				
				<div class="u-flex popup-bottom-fixed" style="z-index: 5;">
					<u-button text="取消"  shape="circle" @click="closeShow"></u-button>
					<u-button text="确认"  shape="circle" type="warning" @click="saveForm" :loading="btnLoading"></u-button>
				</div>
				
			</div>
            
        </u-popup>
	</view>
</template>
<script>

import{imgCheck} from '@/plugins/upload/upload.js'
import {editOrder,orderDeliverData} from '@/config/api.js'
import store from '@/store';

const defaultForm={
	     orderId:'',
		 driverCardNo:'',
		 driverName:'',
		 driverPhone:'',
		 warehouseAddress:'',
		 warehouseContacts:'',
		 warehousePhone:''
    };
	
export default {
    name: 'sendOrder',
    computed: {
    	
		
    },
	data() {
		return {
           show:false,
		   btnLoading:false,
		   rules:{
			   driverCardNo: [{
		  			required: true,
		  			message: '请输入车牌号',
		  			// 可以单个或者同时写两个触发验证方式
		  			trigger: ['blur', 'change']
		  		}],
				driverName: [{
					required: true,
					message: '请输入司机姓名',
					// 可以单个或者同时写两个触发验证方式
					trigger: ['blur', 'change']
				}],
				driverPhone: [{
					required: true,
					message: '请输入联系手机',
					// 可以单个或者同时写两个触发验证方式
					trigger: ['blur', 'change']
				},{
					// 自定义验证函数，见上说明
					validator: (rule, value, callback) => {
						// 上面有说，返回true表示校验通过，返回false表示不通过
						// uni.$u.test.mobile()就是返回true或者false的
						return uni.$u.test.mobile(value);
					},
					message: '手机号码不正确',
					// 触发器可以同时用blur和change
					trigger: ['change','blur'],
				}],
				warehouseAddress: [{
					required: true,
					message: '请输入仓库地址',
					// 可以单个或者同时写两个触发验证方式
					trigger: ['blur', 'change']
				}],
				warehouseContacts: [{
					required: true,
					message: '请输入联系人',
					// 可以单个或者同时写两个触发验证方式
					trigger: ['blur', 'change']
				}],
				warehousePhone: [{
					required: true,
					message: '请输入仓库联系电话',
					// 可以单个或者同时写两个触发验证方式
					trigger: ['blur', 'change']
				},{
					// 自定义验证函数，见上说明
					validator: (rule, value, callback) => {
						// 上面有说，返回true表示校验通过，返回false表示不通过
						// uni.$u.test.mobile()就是返回true或者false的
						return uni.$u.test.mobile(value);
					},
					message: '手机号码不正确',
					// 触发器可以同时用blur和change
					trigger: ['change','blur'],
				}]
			},
			form:JSON.parse(JSON.stringify(defaultForm)),
			info:{}
		}
	},
    watch:{

    },
	created() {
	
	
	},
	onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
	    	this.$refs.form.setRules(this.rules)
	    },
	methods: {
		getInfo(){
			orderDeliverData({orderId:this.form.orderId}).then((res)=>{
				this.info = res
			})
		},
		init(item){
			this.show = true;
			this.form = JSON.parse(JSON.stringify(defaultForm));
			this.form.orderId = item.orderId;
			setTimeout(()=>{
				//
				this.$refs.form.setRules(this.rules)
				},1000)	
			this.getInfo()
			
		},
		
       saveForm(){
		   this.$refs.form.validate().then(res => {
			   this.btnLoading = true;
			   let  data = JSON.parse(JSON.stringify(this.form));
			   data.operationType = 'sellerSend'
				 editOrder(data).then(()=>{
					   this.btnLoading = false;
					   this.closeShow();
					   uni.showToast({
					     title: '发货信息上传完成！',
					     icon: 'none',
					     duration: 2000,
					   });
					   this.$emit('refresh')
				 }).catch(()=>{
					   this.btnLoading = false;
				 })
		   }).catch(errors => {
		   	
		   })
	   },
	   closeShow(){
		   this.show = false
	   }
        
		
		
        
       
        
        
        
        
      
        
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.popupTitle{
	font-size:$b-font;
	font-weight: bold;
	text-align: center;
	line-height: 50px;
}
   .popup-con{
    	padding:0 16px 16px 16px;
    	.popup-block-pay{
    		text-align: center;
    		padding:20px;
    		.price-sub-title{
    			font-size:$s-font;
    			color:$g-font-color;
    			line-height: 30px;
    		}
    		.price-big-title{
    			font-size: 22px;
    			color:$theme-color;
    			font-weight:bold;
    			margin-top:10px;
    		}
    	}
    	.popup-label{
    		line-height: 40px;
    		font-size:$m-font;
    		color:$g-font-color;
    		@include flexbox(space-between,center)
    	}
    	.img-div{
    		width:210px;
    		height:210px;
    		border:1px solid $border-color;
    		margin:0 auto;
    		background: #f4f5f7;
    	}
        .send-list{
    		padding-top:$marginSpace;
    		.send-item{
    			border-radius: 8px;
    			padding:12px;
    			box-shadow: 0 0 5px rgba(0,0,0,0.1);
    			margin-bottom:$marginSpace;
    			.send-top{
    				@include flexbox(flex-start,flex-start);
    				font-size:$m-font;
    				.name{
    					padding-right:12px;
    					flex:1
    				}
    				.num{
    					font-weight: bold;
    					color:$theme-color
    				}
    			}
    			.send-middle{
    				font-size:$s-font;
    				color:$g-font-color;
    				line-height: 18px;
    				margin-top:5px;
    			}
    			.send-bottom{
    				text-align: right;
    				font-size:$s-font;
    				margin-top:16px
    			}
    		}
    	}
    	.category-list{
    		padding:36rpx 0;
    		.list-item{
    			@include flexbox(flex-start,flex-start);
    			margin-bottom:20rpx;
    			.item-title{
    				width: 126rpx;
    				height: 52rpx;
    				background: rgba(255,255,255,0.39);
    				border: 1px solid #B8B8B8;
    				border-radius: 9rpx;
    				font-size:$m-font;
    				text-align: center;
    				line-height: 52rpx;
    			}
    			.item-list{
    				padding-left:30rpx;
    				width:calc(100% - 126rpx);
    				overflow: hidden;
    				.item-ename{
    					font-size:$s-font;
    					color: #929292;
    					line-height: 52rpx;
    					width: 170rpx;
    					@include textoverflow(1);
    					float:left;
    				}
    			}
    		}
    	}
    	.goodsSn-list{
    		border: 1px solid #DEDEDE;
    		padding:0 10px;
    		font-size:$s-font;
    		margin-top:15px;
    		padding-bottom:10px;
    		.list-cell{
    			border-bottom:1px solid #DEDEDE;
    			@include flexbox(space-between,center);
    			line-height: 60rpx;
    			height:60rpx;
    		}
    		.list-cell:first-child{
    			
    		}
    	}
    	.audio-text{
    		font-size: 34rpx;
    		line-height: 48rpx;
    		color: #414141;
    		text-align: center;
    		padding-top:100rpx;
    	}
    	.audio-dh{
    		@include flexbox(space-between,center);
    	}
    
    }
    .popup-bottom{
    	background: #fff;
    	margin-top:10px;
    	padding:16px;
    }
    .popup-bottom-fixed{
    	position: fixed;
    	width:100%;
    	padding:16px;
    	box-sizing: border-box;
    	bottom:0
    }
    
    

</style>
